<template>
  <div class="plmesg">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="z-999 flex items-center px-20rpx" :style="{ paddingTop: `${topHight}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <span class="text-36rpx font-600">返回</span>
        </div>
      </div>
    </div>
    <div class="message-top mt-48rpx bg-hex-fff p-24rpx">
      <div class="item mb-32rpx">
        <div class="h-92rpx flex items-center">
          <div class="avatar">
            <image class="mr-24rpx h-92rpx w-92rpx" :src="`${cdnUrl}/imgs/detail/avatar.png${imgVersion}`" mode="scaleToFill" />
          </div>
          <div class="describe flex-1">
            <div class="title text-28rpx font-600 leading-33rpx text-hex-333">呱呱</div>
            <div class="mt-15rpx text-24rpx leading-28rpx text-hex-999">
              <span>评论您笔记</span>
              <span class="ml-24rpx">1分钟前</span>
            </div>
          </div>
          <div class="h-92rpx w-92rpx rounded-32rpx bg-hex-d9d9d9">
            <image class="h-92rpx w-92rpx rounded-32rpx" src="" mode="scaleToFill" />
          </div>
        </div>
        <div class="m-auto mt-16rpx flex">
          <div class="mr-24rpx w-92rpx" />
          <div class="flex-1">
            <div class="text-28rpx text-hex-333">评论内容</div>
            <div class="mt-24rpx inline-block h-50rpx rounded-42rpx bg-hex-f5f5f5 pl-20rpx pr-20rpx text-24rpx leading-50rpx">回复</div>
          </div>
          <div class="w-92rpx" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
let topHight = $ref(0)
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
onMounted(() => {
  // #ifdef MP-WEIXIN
  const { capsuleTop } = useCapsulePosition()
  topHight = capsuleTop.value
  // #endif
})
</script>

<style lang='scss'>
.plmesg{
  .item{
    position: relative;

    & :not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: -32rpx;
      left: 0;
      width: 100%;
      height: 2rpx;
      background-color: #f5f5f5; /* 分割线颜色 */
    }
  }
}
</style>
